<template lang="jade">
    .weui_panel_bd
        cellColumn(v-bind:columnData="columnData")
        .weui_media_box.grid_cards
            div.grid_card(v-for='(value, key, index) in columnData.data', v-bind:key='key', v-bind:class="value.bg", @click='')
                div.tile
                    p.normal {{value.title}}
                    span.number 
                        b {{value.data}} 
                    span.normal {{value.uni}}
</template>
<script>

/*global $*/
import Vue from 'Vue';
import cellColumn from './cell_column.vue';

export default {
  methods: {
  },
  computed: {},
  props: [ 'columnData' ],
  watch: {},
  components: {cellColumn},
  events: {},
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style scoped>
.grid_cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
    padding-top: 0;
    padding-bottom: 0;
}

.grid_cards:before {
    border-top: none;
}

.grid_card {
    width: 100%;
    height: 5rem;
    background-color: rgba(38, 40, 52, 0.08);
    background-size: cover;
    /* padding: 10px 0; */
    /* border-top: 1px solid #e5e5e5; */
}

.grid_card .tile {
    width: 100%;
    height: 100%;
    padding: 10px;
}

.grid_card .tile .normal {
    font-size: 0.8rem;
    color: rgba(38, 40, 52, 0.5);
}

.grid_card .title .number {
    font-size: 1.25rem;
    color: #000;
}

.tile1 {
    background-image: url("../../../../assets/tile1-01.png");
}

.tile2 {
    background-image: url("../../../../assets/tile2-01.png");
}

</style>
